/*
 * Copyright 2019 the original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


import classNames from "classnames";
import * as React from "react";
import Flex from "../components/flex";
import Form, {FormObject} from "../components/form";
import Input from "../components/input";
import Swatch from "../components/switch";
import Textarea from "../components/textarea";
import "./shipping-address-form.scss";


interface DeliveryAddressFormProps {
    form: FormObject
}

export default class ShippingAddressForm
    extends React.Component<DeliveryAddressFormProps> {

    public constructor(props: Readonly<DeliveryAddressFormProps>) {
        super(props);
    }

    public render() {
        return (
            <Form form={this.props.form}>
                <div className="delivery-address-form">
                    <section className="delivery-address-form-inner">
                        <Form.Item label="收货人">
                            <Input name="consignee" placeholder="请填写收货人姓名"/>
                        </Form.Item>
                        <Form.Item label="手机号码">
                            <Input name="mobile" type="number" placeholder="请填写收货人手机号"/>
                        </Form.Item>
                        <Form.Item label="所在地区">
                            <Input name="location" placeholder="省市区县、乡镇等"/>
                        </Form.Item>
                        <Form.Item label="详细地址">
                            <Textarea name="address" placeholder="街道、楼牌等"/>
                        </Form.Item>
                    </section>
                    <Flex justifyContent="space-between" alignItems="center"
                          className={classNames("delivery-address-form-inner", "delivery-address-default")}>
                        <Flex direction="column">
                            <div>设置默认地址</div>
                            <div className="delivery-address-default-alert">提示:每次下单会默认推荐使用该地址</div>
                        </Flex>
                        <Form.FieldDecorator><Swatch name="defaulted"/></Form.FieldDecorator>
                    </Flex>
                </div>
            </Form>
        );
    }
}
